<template>
	<view class="w-750" :style="'height:' + windowHeight + 'px;'">
		<!-- #ifdef MP-WEIXIN -->
		<view class="head-style w-750 fixed-top">
			<view class="flex-1" :style="'height:' + statusBarHeight + 'px;'"></view>
			<view class="flex-1 row-ac mx-3">
				<view class="row-ac">
					<view class="row-a-j-fc">
						<button class="shara-button" open-type="share"><text
								class="iconfont icon-fenxiang1"></text></button>
						<view class="font-s-1">分享</view>
					</view>
					<view class="row-a-j-fc ml-3" @click="navToAgent('/pages/user/becoming-agent')">
						<view class="shara-button">
							<view class="iconfont icon-gonggao"></view>
							<!-- <view class="notice-num row font-s-2">4</view> -->
						</view>
						<view class="font-s-1">公告</view>
					</view>
					<view class="ml-5">
						<image src="https://elianto.xiaozhupuman.com.cn/files/common/elian_logo.png" mode=""
							class="elian-logo">
						</image>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="swiper-box">
			<swiper :indicator-dots="true" :autoplay="true" class="swiper-box">
				<swiper-item class="flex-1 swiper-box" v-for="(item,index) in advertisingList" :key="index"
					@click="navTo(item.route)">
					<view class="flex-1 swiper-box position-relative">
						<view class="flex-1 swiper-box">
							<image :src="item.image" mode="aspectFill"></image>
							<view class="flex-1 adv-box row-a-j-fc">
								<view class="font-s-65 font-w in1line adv-name">{{ item.adv_name }}</view>
								<view class="font-s-4 mt-2 in1line">{{ item.describe }}</view>
								<view class="take-box row text-white font-s-35 mt-3">查看详情</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="flex-1 mx-4">
			<view class="py-3 border-bottom">
				<view class="flex-1 row-a-j-fc py-3">
					<view class="font-s-75 font-w">EXCHANGE</view>
					<view class="font-s-5 font-w mt-1">积分兑换</view>
				</view>
				<view class="flex-1 mt-5" v-if="exchangeProductList.length > 0">
					<view class="flex-1 exchange-box row-ac-fw">
						<view class="exchange-product" v-for="exchange in exchangeProductList" :key="exchange.id"
							@click="toGoodsDetails(exchange)">
							<view class="exchange-img">
								<image :src="exchange.image_list[0].url" mode=""></image>
							</view>
							<view class="flex-1 text-center mx-2 mt-2" style="display: block;">
								<view class="product-name in2line font-s-4 font-w">{{ exchange.product_name }}</view>
								<view class="font-s-2 sub-name mt-2">{{ exchange.sub_name }}</view>
								<view class="font-s-3 mt-2" v-if="exchange.exchange_integral > 0">
									{{ exchange.exchange_integral }}积分</view>
								<view class="font-s-3 mt-2" v-else>暂未开始</view>
								<view class="font-s-3 mt-3 to-detail">
									{{ exchange.exchange_integral > 0 ? '前往兑换' : '即将开放' }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-1 row mt-3" @click="toRecommendtList">
					<view class="mt-6 to-more font-s-45 row">更多积分兑换</view>
				</view>
			</view>
		</view>
		<view class="flex-1 mx-4">
			<view class="py-3 border-bottom">
				<view class="flex-1 row-a-j-fc py-3">
					<view class="font-s-75 font-w">RECOMMENDED</view><!-- exchange -->
					<view class="font-s-5 font-w mt-1">产品推荐</view>
				</view>
				<view class="flex-1 recommend-box mb-3" @click="toGoodsDetails(recommendedOne)">
					<view class="recommend-img">
						<image :src="recommendedOne.image_list[0].url" mode=""></image>
					</view>
					<view class="flex-1 row-a-j-fc">
						<view class="font-s-45 font-w row-a-j-fc in2line">{{ recommendedOne.product_name }}</view>
						<view class="font-s-2 mt-1">{{ recommendedOne.sub_name }}</view>
						<view class="font-s-3 mt-1">￥{{ recommendedOne.price }}</view>
						<view class="to-recommend row font-s-3 mt-3">即刻拥有</view>
					</view>
				</view>
				<view class="flex row mt-8 text-muted font-s-2 font-w-300" v-if="recommendedList.length > 0"><text
						class="iconfont icon-back2-01 mr-3" style="font-size: 20rpx;"></text>往右滑，探索更多</view>
				<view class="flex-1 mx-3 mt-5" v-if="recommendedList.length > 0">
					<scroll-view scroll-x class="hot-box flex-1 scroll-row">
						<view class="hot-product scroll-row-item" v-for="hot in recommendedList" :key="hot.id"
							@click="toGoodsDetails(hot)">
							<view class="hot-img">
								<image :src="hot.image_list[0].url" mode=""></image>
							</view>
							<view class="flex-1 text-center mx-2 mt-2" style="display: block;">
								<view class="product-name in2line font-s-4 font-w">{{ hot.product_name }}
								</view>
								<view class="font-s-2 sub-name mt-2">{{ hot.sub_name }}</view>
								<view class="font-s-3 mt-2">￥ {{ hot.price }}</view>
								<view class="font-s-3 mt-3 to-detail" style="">
									即刻拥有</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="flex-1 row mt-3" @click="toRecommendtList">
					<view class="mt-6 to-more font-s-45 row">探索更多产品推荐</view>
				</view>
			</view>
			<view class="py-3 border-bottom" v-for="category in categoryProductList" :key="category.id"
				v-if="category.recommended_products.length > 0 || category.hot_products > 0">
				<view class="flex-1 row-a-j-fc py-3">
					<view class="font-s-75 font-w">MAKEUP</view>
					<view class="font-s-5 font-w mt-1">{{ category.category_name }}</view>
				</view>
				<view class="flex-1 recommend-box mb-3" v-for="recommend in category.recommended_products"
					:key="recommend.id" @click="toGoodsDetails(recommend)">
					<view class="recommend-img">
						<image :src="recommend.image_list[0].url" mode=""></image>
					</view>
					<view class="flex-1 row-a-j-fc">
						<view class="font-s-45 font-w row-a-j-fc in2line">{{ recommend.product_name }}</view>
						<view class="font-s-2 mt-1">{{ recommend.sub_name }}</view>
						<view class="font-s-3 mt-1">￥{{ recommend.price }}</view>
						<view class="to-recommend row font-s-3 mt-3">即刻拥有</view>
					</view>
				</view>
				<view class="flex row mt-8 text-muted font-s-2 font-w-300" v-if="category.hot_products.length > 0"><text
						class="iconfont icon-back2-01 mr-3" style="font-size: 20rpx;"></text>往右滑，探索更多</view>
				<view class="flex-1 mx-3 mt-5" v-if="category.hot_products.length > 0">
					<scroll-view scroll-x class="hot-box flex-1 scroll-row">
						<view class="hot-product scroll-row-item" v-for="hot in category.hot_products" :key="hot.id"
							@click="toGoodsDetails(hot)">
							<view class="hot-img">
								<image :src="hot.image_list[0].url" mode=""></image>
							</view>
							<view class="flex-1 text-center mx-2 mt-2" style="display: block;">
								<view class="product-name in2line font-s-4 font-w">{{ hot.product_name }}
								</view>
								<view class="font-s-2 sub-name mt-2">{{ hot.sub_name }}</view>
								<view class="font-s-3 mt-2">￥ {{ hot.price }}</view>
								<view class="font-s-3 mt-3 to-detail" style="">
									即刻拥有</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="flex-1 row mt-3" @click="toProductList(category.id)">
					<view class="mt-6 to-more font-s-45 row">探索更多{{ category.category_name }}</view>
				</view>
				<view class="flex-1 fixed-bottom" style="bottom: 10rpx;"
					v-if="noticeDetail.is_show == true && noticeShow ==true">
					<view class="flex-1 position-relative">
						<view class="flex-1 mx-3 notice-box row-ac text-white">
							<view class="font-s-3 ml-2"><text class="iconfont icon-gonggao mr-1"></text>公告</view>
							<view class="flex-1 mx-2"><uni-notice-bar show-icon scrollable
									:text="noticeDetail.content" />
							</view>
						</view>
						<view class="close-button row" @click="storageNotice">
							<text class="iconfont icon-a-errorlight-01"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		advertisingListUrl,
		productCategoriesTreeUrl,
		productListUrl,
		categoryProductListUrl,
		userInfoUrl,
		noticeDetailUrl
	} from '@/api/index.js'
	export default {
		data() {
			return {
				statusBarHeight: '',
				watchButtonWidth: '',
				windowHeight: '',
				headHeight: '',
				noticeShow: true,
				advQueryInfo: {
					position: 1,
					belong: 1,
					application: 1
				},
				recommendedQueryInfo: {
					is_recommend: 'True'
				},
				exchangeQueryInfo: {
					is_exchange: 'True'
				},
				recommendedOne: '',
				recommendedList: [],
				advertisingList: [],
				categoryProductList: [],
				exchangeProductList: [],
				markId: '',
				userMarkId: '',
				noticeDetail: '',
				notice_mark: ''
			}
		},
		mounted() {
			uni.createSelectorQuery()
				.in(this)
				.select('.head-style')
				.boundingClientRect(data => {
					this.headHeight = data.height;

				})
				.exec();
		},
		created() {
			this.$getScreenInfo().then(res => {
				this.statusBarHeight = res.statusBarHeight + 5
				this.windowHeight = res.windowHeight
			})
		},
		onLoad(options) {
			this.init()
			if (options.markCode) {
				this.userMarkId = options.markCode
				uni.setStorage({
					key: 'userMarkId',
					data: options.markCode
				});
			} else {
				this.userMarkId = ''
			}
		},
		onShow() {
			this.init()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
			}
			return {
				title: 'ELIANTO伊兰朵',
				path: '/pages/tabar/index?markCode=' + this.markId
			}
		},
		methods: {
			init() {
				this.getAdvertisingList()
				this.getCategoryProductList()
				this.getProductList()
				this.getNoticeDetail()
				this.getExchangeProductList()
				this.token = uni.getStorageSync('token')
				if (this.token != '') {
					this.loginStatus = true
					this.getUserInfo()
				}
				this.notice_mark = uni.getStorageSync('notice_mark')
			},
			getNoticeDetail() {
				this.$R.get(noticeDetailUrl).then(res => {
					this.noticeDetail = res.data
					this.noticeMark = res.data.notice_mark
					if (this.notice_mark !== this.noticeMark) {
						this.noticeShow = true
					} else {
						this.noticeShow = false
					}
				})
			},
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.markId = res.data.mark_id
				})
			},
			getAdvertisingList() {
				this.$R.get(advertisingListUrl, this.advQueryInfo).then(res => {
					if (res.code == 200) {
						this.advertisingList = res.data.list
					}
				})
			},
			getProductList() {
				this.$R.get(productListUrl, this.recommendedQueryInfo).then(res => {
					this.recommendedOne = res.data.list[0]
					this.recommendedList = res.data.list.slice(1)
				})
			},
			getExchangeProductList() {
				this.$R.get(productListUrl, this.exchangeQueryInfo).then(res => {
					this.exchangeProductList = res.data.list
				})
			},
			getCategoryProductList() {
				this.$R.get(categoryProductListUrl).then((res) => {
					if (res.code == 200) {
						this.categoryProductList = res.data.list;
					}
				});
			},
			toGoodsDetails(item) {
				uni.navigateTo({
					url: '/pages/product/details?productId=' + item.id,
				});
			},
			storageNotice() {
				this.noticeShow = false
				uni.setStorage({
					key: 'notice_mark',
					data: this.noticeMark
				});
			},
			toProductList(categoryId) {
				uni.navigateTo({
					url: '/pages/product/category-product?categoryId=' + categoryId,
				});
			},
			toRecommendtList() {
				uni.navigateTo({
					url: '/pages/product/recommend-product',
				});
			},
			navToAgent(url) {
				if (this.loginStatus) {
					uni.navigateTo({
						url: url
					});
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}

			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style lang="scss">
	.icon-search-01 {
		font-size: 40rpx;
	}

	.elian-logo {
		width: 250rpx;
		height: 42rpx;
	}

	.swiper-box {
		width: 750rpx;
		height: 1448rpx;

		.adv-box {
			height: 393rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;

			.adv-name {
				margin-top: -80rpx;
			}

			.take-box {
				width: 208rpx;
				height: 93rpx;
				background-color: #000000;
			}
		}
	}

	.recommend-box {
		.recommend-img {
			width: 670rpx;
			height: 670rpx;

			image {
				width: 670rpx;
				height: 670rpx;
			}
		}

		.to-recommend {
			width: 212rpx;
			height: 93rpx;
			background-color: #000000;
			color: #fff;
		}
	}

	.hot-box {
		height: 586rpx;

		.hot-product {
			width: 285rpx;
			height: 585rpx;
			margin-right: 40rpx;

			.hot-img {
				width: 285rpx;
				height: 285rpx;

				image {
					width: 285rpx;
					height: 285rpx;
				}
			}

			.product-name {
				height: 40rpx;
			}

			.sub-name {
				height: 26rpx;
			}

			.to-detail {
				display: inline-block;
				border: 1rpx solid #333;
				padding: 6rpx;
			}

		}
	}

	.exchange-box {
		.exchange-product {
			width: 320rpx;
			height: 585rpx;
			margin-right: 30rpx;
			margin-bottom: 20rpx;

			&:nth-child(2n) {
				margin-right: 0;
			}

			.exchange-img {
				width: 320rpx;
				height: 320rpx;

				image {
					width: 320rpx;
					height: 320rpx;
				}
			}

			.product-name {
				height: 40rpx;
			}

			.sub-name {
				height: 26rpx;
			}

			.to-detail {
				display: inline-block;
				border: 1rpx solid #333;
				padding: 6rpx;
			}

		}
	}

	.to-more {
		width: 322rpx;
		height: 90rpx;
		border: 1rpx solid #333;
		color: #333;
	}

	.notice-box {
		height: 62rpx;
		background-color: #000000;

		.iconfont {
			font-size: 26rpx;
		}
	}

	.close-button {
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
		background-color: #000000;
		position: absolute;
		right: 20rpx;
		top: -38rpx;

		.iconfont {
			font-size: 20rpx;
			color: #fff;
		}
	}

	.shara-button {
		color: #000;
		background-color: initial;
		line-height: 0 !important;
		padding: 15rpx 0;
		position: relative;

		.icon-fenxiang1 {
			font-size: 48rpx;
		}

		.icon-gonggao {
			font-size: 38rpx;
		}

		&:after {
			border: none;
		}

		.notice-num {
			width: 36rpx;
			height: 36rpx;
			background-color: red;
			border-radius: 50%;
			position: absolute;
			right: -13rpx;
			top: -20rpx;
			color: #fff;
		}
	}
</style>